<template>
  <uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
    <view class="list-wrapper">
      <view class="list-header">
        <JSearchInput bgColor="#fff" wrapPd="0" @search="getAgentList" @resetSearch="resetSearch"></JSearchInput>
      </view>
      <scroll-view class="list-main" scroll-y @scrolltolower="getList">
        <block v-for="v in list" :key="v.text">
          <JLine v-bind="v" :isSelect="v.text === agentNo.text" @tap="selected(v)"></JLine>
        </block>
        <jeepayListNull :isShow="true" :list="list.length"></jeepayListNull>
      </scroll-view>
      <view class="list-footer">
        <JButton size="max" pdTop="0" pd="30rpx" @HandleTouch="confirm">确认</JButton>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { inject, onMounted, reactive, ref } from 'vue'
import { $getAgentList } from '@/http/apiManager.js'

import JLine from '@/components/newComponents/JLine/JLine'
import JSearchInput from '@/components/newComponents/JSearchInput/JSearchInput'
import JButton from '@/components/newComponents/JButton/JButton'
import jeepayListNull from '@/components/jeepayListNull/jeepayListNull'
onMounted(() => {
  getAgentList('')
})
const wrapperHidden = inject('wrapperHidden')
const emits = defineEmits(['confirm'])
const searchInfo = ref({
  pageNumber: 1,
  pageSize: 10,
  state:1
})
let flag = true
const list = ref([])
const agentNo = ref({})
const popup = ref()
const open = () => {
  agentNo.value = {}
  popup.value.open()
}
const close = () => {
  popup.value.close()
}
const getAgentList = (val) => {
  if (val) {
    list.value = []
    searchInfo.value.unionAgentInfo = val
  }
  $getAgentList(searchInfo.value).then(({ bizData }) => {
    const { records } = bizData
    if (records.length <= 0) flag = false
    records.forEach((v) => {
      let obj = {
        iconOn: '/static/navImg/nav-dailishang.svg',
        iconClose: '/static/navImg/user-close.svg',
        ml: '30rpx',
        pd: '32rpx 32rpx 32rpx 0',
      }
      obj.name = v.agentName
      obj.text = v.agentNo
      list.value.push(obj)
    })
  })
}
const getList = () => {
  if (!flag) return
  searchInfo.value.pageNumber++
  getAgentList()
}
const resetSearch = () => {
  list.value = []
  searchInfo.value.unionAgentInfo = ''
  searchInfo.value.pageNumber = 1
  searchInfo.value.pageSize = 10
  getAgentList()
}
const selected = (v) => {
  agentNo.value = JSON.parse(JSON.stringify(v))
}
const confirm = () => {
  emits('confirm', agentNo.value)
}
const change = (e) => {
  if (wrapperHidden) {
    wrapperHidden(e.show)
  }
}
defineExpose({ open, close })
</script>

<style lang="scss" scoped>
.list-wrapper {
  padding-top: 30rpx;
  background-color: #ece8f0;
  border-radius: 32rpx 32rpx 0 0;
  .list-header {
    padding: 0 30rpx 30rpx 30rpx;
    .list-title {
      display: flex;
      align-items: center;
      margin-bottom: 30rpx;
      image {
        width: 50rpx;
        height: 50rpx;
        margin-right: 20rpx;
      }
    }
  }
  .list-main {
    height: calc(70vh - 190rpx - 110rpx);
    background-color: #fff;
  }
  .list-footer {
    background-color: #fff;
  }
}
</style>
